<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <title>个人信息表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #app {
            width: 50rem;
            height: 30rem;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 4rem auto;
        }

        /*
        #app div {
            margin: .2rem 0;
        } */
    </style>
</head>

<body>
    <div id="app">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="医助" prop="doctor">
                <el-input v-model="ruleForm.doctor" style="width: 400px;"></el-input>
            </el-form-item>

            <el-form-item label="日期" required>
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker type="date" placeholder="选择日期时间" v-model="ruleForm.date1" style="width: 400px;">
                        </el-date-picker>
                    </el-form-item>
            </el-form-item>


            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" style="width: 400px;"></el-input>
            </el-form-item>


            <el-form-item label="性别" prop="sex">
                <el-select v-model="ruleForm.sex" placeholder="请选择您的性别" style="width: 400px;">
                    <el-option label="男" value="male"></el-option>
                    <el-option label="女" value="female"></el-option>
                </el-select>
            </el-form-item>



            <el-form-item label="出生日期" required>
                <el-col :span="11">
                    <el-form-item prop="date2">
                        <el-date-picker type="date" placeholder="选择出生日期" v-model="ruleForm.date2" style="width: 400px;">
                        </el-date-picker>
                    </el-form-item>
            </el-form-item>

            <el-form-item label="手机号码" prop="phone">
                <el-input v-model="ruleForm.phone" style="width: 400px;"></el-input>
            </el-form-item>

            <el-form-item label="验证码" prop="code">
                <el-input v-model="ruleForm.code" style="width: 284px;"></el-input>
                <el-button @click="getCode" :disabled="isDisable">发送验证码</el-button>
                <span v-show="!show" class="count">{{count}}s后重试 </span>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')" style="width: 8rem;margin-left: 7rem;">提交
                </el-button>
            </el-form-item>
        </el-form>
    </div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    window.onpageshow = GetRequest();
    function GetRequest() {
        var code = window.location.search.slice(1); //获取url中"?"符后的字符串
        axios({
            url: '47.106.78.19:89/jeecg-boot/sys/thirdApp/wechatEnterprise/auth',
            methods: 'post',
            data: code
        }).then(response => {
            console.log(response);
        }).catch(error => {
            console.log(error);
        })
    }
</script>


<script>
    new Vue({
        el: '#app',
        data() {
            var validatePhone = (rule, value, callback) => {
                if (value && value != "") {
                    if (
                        !/^1[0-9]{10}$/.test(
                            value
                        )
                    ) {
                        callback(new Error("请输入正确的手机号码"));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            }


            return {
                show: true,
                isDisable: false,
                count: '',
                ruleForm: {
                    doctor: '',
                    name: '',
                    sex: '',
                    date1: '',
                    date2: '',
                    phone: '',
                    delivery: false,
                    type: [],
                },

                rules: {
                    doctor: [
                        { required: true, message: '请输入医助姓名', trigger: 'blur' },
                        { min: 2, max: 10, message: '请输入正确的姓名', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入您的姓名', trigger: 'blur' },
                        { min: 2, max: 10, message: '请输入正确的姓名', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择您的性别', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择出生日期', trigger: 'change' }
                    ],
                    phone: [
                        { required: true, message: '请输入您的手机号码', trigger: 'blur' },
                        { validator: validatePhone, trigger: 'blur' }


                    ],
                    code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]

                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('提交成功!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            // resetForm(formName) {
            //     this.$refs[formName].resetFields();
            // },
            getCode() {
                if (value && value != "") {
                    if (
                        !/^1[0-9]{10}$/.test(
                            value
                        )
                    ) {
                        callback(new Error("请输入正确的手机号码"));
                    } else {
                        this.isDisable = true;
                        this.show = false;
                        const TIME_COUNT = 60;
                        if (!this.timer) {
                            this.count = TIME_COUNT;
                            this.show = false;
                            this.timer = setInterval(() => {
                                if (this.count > 0 && this.count <= TIME_COUNT) {
                                    this.count--;

                                } else {
                                    this.show = true;
                                    clearInterval(this.timer);
                                    this.timer = null;
                                    this.isDisable = false;

                                }
                            }, 1000)
                        };
                    }
                } else {
                    callback();
                }

            }
        }

    })
</script>

</html>